<template>
  <div class="hot-list">
    <div class="hot-list-top">
      <div class="hot-list-top-left">
        <span>本月热门攻略</span>
      </div>
    </div>

    <div class="hot-list-list">
      <div class="hot-list-list-it" v-for="i in 10" :key="i">
        <template v-if="data[i - 1]">
          <div class="it-closed">
            <span :class="'index_' + i">{{ i }}</span>
            <span class="content-close" @click="gotoInfoDetail(data[i - 1].id)" :title="data[i - 1].titleOne">{{ data[i - 1].titleOne }}</span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter()
const route = ref(useRoute());
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const gotoInfoDetail = (id) => {
  router.push({
    name: "information-detail",
    params: { id: id },
  });
};
const star = ref(5);
</script>

<style lang="less" scoped>
.hot-list {
  display: flex;
  flex-direction: column;

  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #f5f7f8;

  &-list {
    display: flex;
    flex-direction: column;
    padding: 10px 20px 30px 20px;

    &-it {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      cursor: pointer;
      // margin: 7.5px 0;
      height: 32px;
      padding: 5px 0px;

      // &:hover {
      //   height: auto;
      //   .it-open {
      //     opacity: 1;
      //     height: auto;
      //   }
      // }
    }

    .it-closed {
      display: flex;
      align-items: center;
      cursor: pointer;

      span:first-child {
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: #f5f7f8;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        color: #93999e;
        line-height: 14px;
      }

      span:last-child {
        font-size: 14px;
        font-weight: 400;
        color: #1d2127;
        line-height: 14px;
        width: 270px;
        overflow: hidden;
        text-overflow: ellipsis; //文本溢出显示省略号
        white-space: nowrap; //文本不会换行

        &:hover {
          color: @link-color;
        }
      }

      .index_1 {
        background: #f54446 !important;
        color: #fff !important;
      }

      .index_2 {
        background: #f9b002 !important;
        color: #fff !important;
      }

      .index_3 {
        background: #47b752 !important;
        color: #fff !important;
      }
    }

    .it-open {
      display: flex;
      opacity: 0;
      margin: 10px 0px 10px 30px;

      // .stars {
      //   display: inline-flex;
      //   margin-left: 5px;
      //   color: #f9b002;
      //   font-size: 13px;
      // }

      .image {
        margin-right: 10px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 6px;
        }
      }

      .content {
        display: flex;
        flex-direction: column;
        .inner {
          height: 25px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            margin-top: 0px;
            font-size: 14px;
            font-weight: 400;
            color: #545759;
            line-height: 14px;
          }

          /deep/.el-rate {
            margin-top: -5px;
            margin-left: 5px;
          }
          /deep/.el-rate__icon {
            margin-right: 0px;
          }
        }
        div:last-child {
          margin-top: 10px;
        }
      }
    }
  }

  &-top {
    // height: 80px;
    // background: linear-gradient(
    //   180deg,
    //   #558081 0%,
    //   rgba(142, 183, 183, 0.77) 100%
    // );
    border-radius: 8px 8px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;

    &-left {
      display: flex;
      flex-direction: column;
      padding: 0 20px;

      span:first-child {
        font-size: 20px;
        font-weight: bold;
        color: #1d2127;
        line-height: 28px;
      }
    }

    &-right {
      span {
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height: 20px;
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .content-close {
    width: 235px !important;
  }
}
</style>
